<script setup lang="ts">
import { RouterView } from 'vue-router'
import NavBar from '@/components/NavBar.vue'
</script>

<!-- 
这段代码是一个 Vue 3 单文件组件，主要功能是构建应用的主布局和路由视图。以下是详细解释：

目的和功能：
作为应用的根组件，负责整体布局
包含导航栏和主要内容区域
管理路由视图的渲染
实现页面切换时的过渡动画
关键组件及其交互：
<el-container>：来自 Element Plus 的布局容器组件
<NavBar />：自定义导航栏组件
<el-main>：Element Plus 的主要内容区域组件
<router-view>：Vue Router 的路由视图组件
<transition>：Vue 的过渡动画组件
<component>：Vue 的动态组件
-->
<template>
  <el-container>
    <NavBar />
    <el-main>
      <router-view v-slot="{ Component }">
        <transition name="fade" mode="out-in">
          <component :is="Component" />
        </transition>
      </router-view>
    </el-main>
  </el-container>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}

.el-header {
  padding: 0;
}

.el-main {
  padding: 20px;
  margin-top: 60px; /* 为固定导航栏留出空间 */
}

/* 页面过渡效果 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
